<template>
    <div id="app">
        <!-- 导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo el-nav" mode="horizontal" @select="selectNav">
            <el-menu-item index="Index" class="nav-aline">
                <img class="logo" src="./assets/logo.png" alt="">
            </el-menu-item>

            <el-menu-item index="Index" style="margin-right: 100px;">Java 编程导航鸭</el-menu-item>
            <el-menu-item index="Index">主页</el-menu-item>
            <el-menu-item index="Coding">coding</el-menu-item>
            <el-menu-item index="Forum">论坛</el-menu-item>

            <div class="nav-right">
                <!-- 搜索框 -->
                <div class="search">
                    <el-autocomplete class="input" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="全站搜索"
                        @select="selectSearch">
                    </el-autocomplete>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                </div>
                <el-submenu class="fold" index="4">
                    <template slot="title">消息</template>
                    <el-menu-item index="4-1">新粉丝</el-menu-item>
                    <el-menu-item index="4-2">新评论</el-menu-item>
                    <el-menu-item index="4-3">私信</el-menu-item>
                </el-submenu>
                <el-submenu class="fold" index="5">
                    <template slot="title">创作</template>
                    <el-menu-item index="Publish">发帖子</el-menu-item>
                    <el-menu-item index="5-2">草稿箱</el-menu-item>
                </el-submenu>
                <!-- 用户头像 -->
                <div class="photo">
                    <!-- 未登录提示(登录前展示) -->
                    <el-popover v-show="!$store.state.user.id" placement="top-start" title="点我登录" width="200"
                        trigger="hover" content="当前您还没有登录哦~ 登录后可享受更多服务！">
                        <!-- 点击跳转登录页 -->
                        <el-button @click="login()" style="border:0;" slot="reference">
                            <!-- 匿名头像 -->
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                        </el-button>
                    </el-popover>
                    <!-- 登录后展示 -->
                    <el-dropdown v-show="$store.state.user.id">
                        <!-- 具体头像 -->
                        <el-avatar icon="el-icon-user-solid"></el-avatar>
                        <!-- 头像下拉框 -->
                        <el-dropdown-menu slot="dropdown">
                            <div>
                                <el-dropdown-item>欢迎回来: {{ $store.state.user.username
                                }}</el-dropdown-item>
                            </div>
                            <!-- 这里需要用 div 包起来，否则不能直接使用 @click 属性 -->
                            <div>   <!--跳转去往个人首页 !-->
                                <router-link :to="{name:'Post'}" style="text-decoration: none;">
                                <el-dropdown-item icon="el-icon-s-home">个人主页</el-dropdown-item>
                                </router-link>
                            </div>
                            <div @click="logout()">
                                <el-dropdown-item icon="el-icon-s-promotion">退出登录</el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-menu>
        <router-view />
    </div>
</template>

<script>
import instance from './utils/request';
import { Message } from 'element-ui';

export default {
    name: 'App',
    data() {
        return {
            //导航栏选项
            activeIndex: '1',
            //搜索框相关
            restaurants: [],
            state: '',
            timeout: null
        };
    },
    methods: {
        /**
         * 导航栏
         * @param {*} key 要路由的名字
         * @param {*} keyPath 这个属性可以暂时用不着
         */
        selectNav(key, keyPath) {
            console.log(keyPath);
            this.$router.push({ name: key });
        },
        /**
         * 搜索框(以下4个方法都是处理搜索框)
         */
        loadAll() {
            return [
                { "value": "Java SE 学习", "address": "JavaSE" },
                { "value": "数据结构与算法", "address": "数据结构与算法" },
                { "value": "框架学习", "address": "框架" }
            ]
        },
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        selectSearch(item) {
            console.log(item);
        },
        /**
         * 登录
         */
        login() {
            //进行登录
            this.$router.push({ name: 'Login' });
        },
        /**
         * 退出登录 
         */
        logout() {
            //1.告知后端用户用户退出登录
            const username = this.$store.state.user.username;
            instance.get("/user/logout?username=" + username + "").then(success => {
                if (success.data.code == 1000) {
                    Message.success("退出成功~");
                    //2.清除登录信息状态(vuex + localStorage)
                    this.$store.commit("logout");
                } else {
                    Message.warning("退出失败，请稍后重试！");
                }
            }).catch(error => {
                Message.error("退出异常，请稍后重试！");
                console.log(error);
            });
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    }
}
</script>

<style>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-color: rgb(240, 242, 245);
}

/* ----------------------- */
.nav-space {
    margin: auto 5px;
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.nav .photo {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-right {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-right .search {
    padding: 10px;
}

.search .input {
    width: 400px;
}

.nav-right .fold {
    width: 150px;
}
</style>
